<template>
    <div class="wrap">
        <!-- 面包屑导航 -->
        <crumb :nav="nav" />

        <!-- 详情中间内容 -->
        <div class="detail-container">
            <!-- sku内容 -->
            <div class="detail-sku">
                <!-- 左侧图片 -->
                <skuPics :pics="productInfo.imgAltas" />

                <!-- 右侧信息 -->
                <skuDetails :productInfo="productInfo"/>
            </div>
            
            <!-- 还可兑换列表 -->
            <themYouCanBuy :listData="themYouCanBuy" />
        </div>

        <!-- 详情介绍 -->
        <skuDescription :description="productInfo.description" />
    </div>
</template>

<script>
// 请求api相关
import { getGoodsInfo } from '@/request/detailApi'

// 组件相关
import crumb from '@/components/common/crumb.vue'
import themYouCanBuy from '@/components/detail/themYouCanBuy.vue'
import skuPics from '@/components/detail/SkuPics.vue'
import skuDetails from '@/components/detail/skuDetails.vue'
import skuDescription from '@/components/detail/skuDescription.vue'
export default {
    components: {
        crumb,
        themYouCanBuy,
        skuPics,
        skuDetails,
        skuDescription
    },
    data() {
        return {
            // 面包屑导航数据
            nav:[],
            // 还可以购买其他的商品列表
            themYouCanBuy: [],
            // 商品信息
            productInfo: {},
            
        }
    },
    created(){
        // 设置页面高度
        document.documentElement.scrollTop = 0
        // 请求详情页相关数据
        getGoodsInfo(this.$route.query.id).then(res=>{
            if(res.code==0){
                let {nav,themYouCanBuy,productInfo} = res.data
                this.nav = nav
                this.themYouCanBuy = themYouCanBuy
                this.productInfo = productInfo

                // 底部图片介绍内容，因为都是html内容而且图片路劲没加前缀
                // 这里需要用正则拼接url
                this.productInfo.description = this.productInfo.description.replace( /upload/g , this.imgBaseUrl+"/upload");
            }
        })
    },
    methods:{
        // 底部详细介绍tab点击事件
        tabClick(index){
            this.currentTabIndex = index
        }
    },
    watch:{
        '$route.query.id':{   //如果本页面跳本页面，先判断是不是同一个商品跳转
            handler(newVal,oldVal){  
                if(newVal!=oldVal){
                    this.$router.go(0)  //this.$router.go(0)用法就是刷新页面
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
    .wrap{
        padding-bottom: 40px;

        .detail-container{
            display: flex;
            padding-bottom: 48px;
            box-sizing: border-box;
            border-bottom: 1px solid #ececec;

            .detail-sku{
                flex: 1;
                display: flex;
            }

        }

    }
</style>
